<template>
    <div class="countdown">
        <section class="t" v-if="!timeOver">
            <span>{{ hour }}</span>:<span>{{ minute }}</span>:<span>{{ second }}</span>:<span>{{ msec }}</span>
        </section>
        <section class="over" v-else>
            <span>今日已抢完</span>
        </section>
    </div>
</template>

<script>

export default {
    name: 'countdown',
    props: {
        times: {
            now: '',
            end: '',
        },         
    },
    data() {
        return {
            l_time: null,
            hour: '00',
            minute: '00',
            second: '00',
            msec: '0',
            timeOver: false,
        }
    },
    created() {

        let time = new Date();
        let t = time.getFullYear() +'/' + (time.getMonth()+1) + '/' + time.getDate() +' '+ this.times.end

        this.flag = setInterval(() =>{
            this.secondToDate(t)      
        },50)
         
    },
    methods: {
        secondToDate(end) {
            let leftTime = (new Date(end).getTime()-new Date().getTime());
            if(leftTime<0){
                this.timeOver = true;
                this.$emit('timeOver', this.timeOver)
                return;
            }

            this.hour = Math.floor(leftTime / 1000 / 60 / 60 % 24)>9?Math.floor(leftTime / 1000 / 60 / 60 % 24):'0'+Math.floor(leftTime / 1000 / 60 / 60 % 24);
            this.minute = Math.floor(leftTime / 1000 / 60 % 60)>9?Math.floor(leftTime / 1000 / 60 % 60):'0'+Math.floor(leftTime / 1000 / 60 % 60);
            this.second = Math.floor(leftTime / 1000 % 60)>9?Math.floor(leftTime / 1000 % 60):'0'+Math.floor(leftTime / 1000 % 60);
            this.msec = String(Math.floor(leftTime % 1000)).split('')[0];
            this.$emit('timeOver', this.timeOver)
            if(leftTime == 0){
                clearInterval(this.flag)
                this.timeOver = true;
                this.$emit('timeOver', this.timeOver)
            }
        }
    },
    watch:{
        '$route' (to, from) {
            
        }
    }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.countdown{
    display: inline-block;
    text-align: center;
    .t >span{
        display: inline-block;      
        line-height: 20px;
        width: 18px;
        height: 18px;
        color: #f8f8f8;
        background-color: #000;
        margin: 0 2px;
    }
    .t >span:last-child{
        background-color: red;
    }
    .over{
        padding: 4px 16px;
        background: linear-gradient(to right, #323232, #757575); 
        color: #fff;
        display: inline-block;
        margin-top: -3px;
        border-radius: 20px;
    }
}
</style>
